<template>
  <view
    class="cloud-container"
    :style="cloudContainerStyle"
  >
    <view class="cloud-container-content">
      <slot>组团流程</slot>
    </view>
    <text class="left-cloud" />
    <text class="right-cloud" />
  </view>
</template>
<script>
export default {
  props: {
    width: { type: Number, default: 326 }
  },
  computed: {
    cloudContainerStyle() {
      return {
        width: `${this.width}rpx`
      };
    }
  }
};
</script>
<style lang="scss">
$cloudIcon: 'https://cdn-habitv5.xaxthk.cn/font-static/cloud-title(1).png';
.cloud-container {
  position: absolute;
  top: 0;
  left: 50%;
  text-align: center;
  box-sizing: border-box;
  min-width: 342px;
  height: 80px;  
  border: 2px solid #812900;
  background: linear-gradient(180deg, #FFEEA9 0%, #FFD700 100%); 
  border-radius: 100px; 
  transform: translate3d(-50%, -50%, 0);
  &-content {
    line-height: 76px;
    font-size: 32px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #A13D0F; 
  }
  .left-cloud,
  .right-cloud {
    position: absolute;
    width: 126px;
    height: 56px;
    background-size: 100% 100%;
    top: 12px;
    background-image: url($cloudIcon);
  }
  .left-cloud {
    left: -62px;
  }
  .right-cloud {
    right: -62px;
    transform: rotateY(180deg);
  }
}
</style>